<div class="trend-container">
  <aside class="trend-aside">
    <app-device-tag-selector fxFlexFill [deviceCategories]="deviceCategories" [multipleFarm]="true" [choiceDeviceCount]="deviceCountLimit"
      [includeTagSelector]="false" (selectedDevicesChange)="onSelectedDevicesChange($event)">
    </app-device-tag-selector>
  </aside>
  <section class="trend-main">
    <header class="trend-main-header">
      <span (click)=onClickHeader(0) [ngClass]="{on:active==0}">
        挂牌查询
      </span>
      <span (click)=onClickHeader(1) [ngClass]="{on:active==1}">
        状态查询
      </span>
    </header>
    <div class="trend-main-content" *ngIf="active==0">
      <header class="alarm-main-query" fxLayout="row">
        <!-- <nz-select nzMode="turboperCategorys" style="width: 100%;" nzPlaceHolder="Tag Mode" [(ngModel)]="selectturCategorys">
          <nz-option *ngFor="let option of turboperCategorys" [nzLabel]="option?.operCategoryName" [nzValue]="option?.operCategoryId">
          </nz-option>
        </nz-select> -->
        <section *ngIf="turboperCategorys">
          <span class="query-title">选择挂牌状态:</span>
          <p-multiSelect maxSelectedLabels='2' defaultLabel="请选择挂牌状态" selectedItemsLabel='已选择{0}个项目' [options]="turboperCategorys"
            [(ngModel)]="selectedMultipleOption"></p-multiSelect>
        </section>

        <!--查询时间表单选择-->
        <section>
          起始时间:
          <p-calendar [locale]="en" [(ngModel)]="startTime" showTime="showTime" hourFormat="24"></p-calendar>
        </section>
        <section>
          结束时间:
          <p-calendar [locale]="en" [(ngModel)]="endTime" showTime="showTime" hourFormat="24"></p-calendar>
        </section>
        <section>
          <button class="button" (click)="initData()">确定</button>
        </section>

      </header>
      <section class="trend-main-section table">
        <!--<p-dataTable [value]="turboperHistorys" [rows]="pageSize" [paginator]="true" [totalRecords]="turboperHistorys?.length" expandableRows="true">-->
          <!--<p-column expander="true" styleClass="col-icon"></p-column>-->
          <!--<p-column field="farmName" header="风场"></p-column>-->
          <!--<p-column field="deviceName" header="风机"></p-column>-->
          <!--<p-column field="operCategoryName" header="计划类型"></p-column>-->
          <!--<p-column field="operDesc" header="故障描述"></p-column>-->
          <!--<p-column field="operStartTime" header="故障发生时间">-->
            <!--<ng-template let-col let-data="rowData" pTemplate="body">-->
              <!--<span>{{data[col.field] |date : "yyyy-MM-dd HH:mm"}}</span>-->
            <!--</ng-template>-->
          <!--</p-column>-->
          <!--<p-column field="operEndTime" header="恢复运行时间">-->
            <!--<ng-template let-col let-data="rowData" pTemplate="body">-->
              <!--<span>{{data[col.field] |date : "yyyy-MM-dd HH:mm"}}</span>-->
            <!--</ng-template>-->
          <!--</p-column>-->
          <!--<p-column field="stopTime" header="持续时间(h)"></p-column>-->
          <!--<p-column field="lossPower" header="损失电量(万kWh)">-->
            <!--<ng-template let-col let-data="rowData" pTemplate="body">-->
              <!--<span>{{data[col.field]*ratio |number:'1.0-2'}}</span>-->
            <!--</ng-template>-->
          <!--</p-column>-->
          <!--<p-column field="operProcess" header="故障处理过程"></p-column>-->
          <!--<ng-template let-car pTemplate="rowexpansion">-->
            <!--<div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:14px">-->
              <!--<div class="ui-grid-row">-->

                <!--<div class="ui-grid-col-12">-->
                  <!--<div class="ui-grid ui-grid-responsive ui-grid-pad">-->
                    <!--<div class="ui-grid-row">-->
                      <!--<div class="ui-grid-col-1 label">故障描述: </div>-->
                      <!--<div class="ui-grid-col-11">-->
                        <!--{{car.operDesc}}-->
                      <!--</div>-->
                    <!--</div>-->
                    <!--<div class="ui-grid ui-grid-responsive ui-grid-pad">-->
                      <!--<div class="ui-grid-row">-->
                        <!--<div class="ui-grid-col-1 label">原因分析: </div>-->
                        <!--<div class="ui-grid-col-11">-->
                          <!--{{car.operAnalysis}}-->
                        <!--</div>-->
                      <!--</div>-->
                      <!--<div class="ui-grid-row">-->
                        <!--<div class="ui-grid-col-1 label">处理过程: </div>-->
                        <!--<div class="ui-grid-col-11">-->
                          <!--{{car.operProcess}}-->
                        <!--</div>-->
                      <!--</div>-->
                    <!--</div>-->
                  <!--</div>-->
                <!--</div>-->
              <!--</div>-->
            <!--</div>-->
          <!--</ng-template>-->
        <!--</p-dataTable>-->
      </section>
    </div>
    <div class="trend-main-content" *ngIf="active==1">
      <header class="alarm-main-query" fxLayout="row">
        <!-- <nz-select nzMode="turboperCategorys" style="width: 100%;" nzPlaceHolder="Tag Mode" [(ngModel)]="selectturCategorys">
            <nz-option *ngFor="let option of turboperCategorys" [nzLabel]="option?.operCategoryName" [nzValue]="option?.operCategoryId">
            </nz-option>
          </nz-select> -->
        <section *ngIf="turboperCategorys">
          <span class="query-title">选择状态状态:</span>
          <p-multiSelect maxSelectedLabels='2' defaultLabel="请选择挂牌状态" selectedItemsLabel='已选择{0}个项目' [options]="turbStatuses" [(ngModel)]="selectedMultipleOption2"></p-multiSelect>

        </section>

        <!--查询时间表单选择-->
        <section>
          起始时间:
          <p-calendar [locale]="en" [(ngModel)]="stateStartTime" showTime="showTime" hourFormat="24"></p-calendar>
        </section>
        <section>
          结束时间:
          <p-calendar [locale]="en" [(ngModel)]="stateEndTime" showTime="showTime" hourFormat="24"></p-calendar>
        </section>
        <section>
          <button class="button" (click)="initDataTurbStatus()">确定</button>
        </section>

      </header>
      <section class="trend-main-section table2">
        <!--<p-dataTable [value]="stateDatas" [rows]="pageSize" [paginator]="true" [totalRecords]="stateDatas?.length">-->
          <!--&lt;!&ndash;[lazy]="true" (onLazyLoad)="loadCarsLazy($event)"&ndash;&gt;-->
          <!--<p-column field="farmName" header="风场 "></p-column>-->
          <!--<p-column field="deviceName" header="风机 "></p-column>-->
          <!--<p-column field="stateName" header="状态名称"></p-column>-->

          <!--<p-column field="startTime" header="开始时间">-->
            <!--<ng-template let-col let-data="rowData" pTemplate="body">-->
              <!--<span>{{data[col.field] |date : "yyyy-MM-dd HH:mm"}}</span>-->
            <!--</ng-template>-->
          <!--</p-column>-->
          <!--<p-column field="endTime" header="结束时间">-->
            <!--<ng-template let-col let-data="rowData" pTemplate="body">-->
              <!--<span>{{data[col.field] |date : "yyyy-MM-dd HH:mm"}}</span>-->
            <!--</ng-template>-->
          <!--</p-column>-->
          <!--<p-column field="hours" header="持续时间(h)"></p-column>-->
        <!--</p-dataTable>-->
        <!--  <p-dataTable
          [value]="stateDatas"
          [paginator]="true"
          rows="15"
          [totalRecords]="stateDatas?.length">
          <p-column field="farmName" header="风场 "></p-column>
          <p-column field="deviceName" header="风机 "></p-column>
          <p-column field="stateName" header="状态名称"></p-column>

          <p-column field="startTime" header="开始时间">
            <ng-template let-col let-data="rowData" pTemplate="body">
              <span>{{data[col.field] |date : "yyyy-MM-dd HH:mm"}}</span>
            </ng-template>
          </p-column>
          <p-column field="endTime" header="结束时间">
            <ng-template let-col let-data="rowData" pTemplate="body">
              <span>{{data[col.field] |date : "yyyy-MM-dd HH:mm"}}</span>
            </ng-template>
          </p-column>
          <p-column field="hours" header="持续时间(h)"></p-column>

        </p-dataTable> -->
      </section>
    </div>
  </section>
</div>
